<template>
  <div class="login">
    <!-- 注册表单 -->
    <el-form ref="signupFormRef" class="login-form" :model="signupData" :rules="signupRules">
      <div class="form-title">
        <h2>“智语无忧”——基于语音交互的网页无障碍智能辅助系统</h2>
      </div>

      <!-- 用户名 -->
      <el-form-item prop="username">
        <div class="input-wrapper">
          <el-icon class="mx-2">
            <User />
          </el-icon>
          <el-input
            ref="username"
            v-model="signupData.username"
            placeholder="用户名"
            name="username"
            size="large"
            class="h-[48px]"
          />
        </div>
      </el-form-item>

      <!-- 密码 -->
      <el-form-item prop="password">
        <div class="input-wrapper">
          <el-icon class="mx-2">
            <Lock />
          </el-icon>
          <el-input
            v-model="signupData.password"
            placeholder="密码"
            type="password"
            name="password"
            size="large"
            class="h-[48px] pr-2"
            show-password
          />
        </div>
      </el-form-item>

      <!-- 确认密码 -->
      <el-form-item prop="confirmPassword">
        <div class="input-wrapper">
          <el-icon class="mx-2">
            <Lock />
          </el-icon>
          <el-input
            v-model="signupData.confirmPassword"
            placeholder="确认密码"
            type="password"
            name="confirmPassword"
            size="large"
            class="h-[48px] pr-2"
            show-password
          />
        </div>
      </el-form-item>

      <!-- 注册按钮 -->
      <el-button
        type="primary"
        size="large"
        class="w-full login-btn"
        @click.prevent="handleSignupSubmit"
      >
        注册
      </el-button>

      <div class="text-center mt-4">
        <span>已有账号？</span>
        <el-link type="primary" @click="goToLogin">去登录</el-link>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const signupFormRef = ref();

const signupData = ref({
  username: "",
  password: "",
  confirmPassword: "",
});

const validateConfirmPassword = (rule: any, value: string, callback: any) => {
  if (value !== signupData.value.password) {
    callback(new Error("两次输入的密码不一致"));
  } else {
    callback();
  }
};

const signupRules = {
  username: [
    {
      required: true,
      trigger: "blur",
      message: "请输入用户名",
    },
  ],
  password: [
    {
      required: true,
      trigger: "blur",
      message: "请输入密码",
    },
    {
      min: 6,
      message: "密码长度不能小于6位",
      trigger: "blur",
    },
  ],
  confirmPassword: [
    {
      required: true,
      trigger: "blur",
      message: "请再次输入密码",
    },
    {
      validator: validateConfirmPassword,
      trigger: "blur",
    },
  ],
};

function handleSignupSubmit() {
  signupFormRef.value?.validate((valid: boolean) => {
    if (valid) {
      setTimeout(() => {
        router.push("/dashboard");
      }, 1000);
    }
  });
}

function goToLogin() {
  router.push("/login");
}
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background: url("@/assets/images/login-bg.jpg") no-repeat center right;

  .login-header {
    position: absolute;
    top: 0;
    display: flex;
    justify-content: right;
    width: 100%;
    padding: 15px;

    .logo {
      width: 26px;
      height: 26px;
    }

    .title {
      margin: auto 5px;
      font-size: 24px;
      font-weight: bold;
      color: #3b82f6;
    }
  }

  .login-form {
    display: flex;
    flex-direction: column;
    width: 470px;
    padding: 40px;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: var(--el-box-shadow-light);

    @media (width <= 460px) {
      width: 100%;
      padding: 0 20px;
    }

    .form-title {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 0 20px;
      text-align: center;
    }

    .input-wrapper {
      display: flex;
      align-items: center;
      width: 100%;
    }

    .captcha-img {
      height: 48px;
      cursor: pointer;
      border-top-right-radius: 6px;
      border-bottom-right-radius: 6px;
    }

    .third-party-login {
      display: flex;
      justify-content: center;
      width: 100%;
      color: var(--el-text-color-secondary);

      *:not(:first-child) {
        margin-left: 20px;
      }

      .icon {
        cursor: pointer;
      }
    }

    .login-btn {
      font-size: 24px;
    }
  }

  .login-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
  }
}

:deep(.el-form-item) {
  background: var(--el-input-bg-color);
  border: 1px solid var(--el-border-color);
  border-radius: 5px;
}

:deep(.el-input) {
  .el-input__wrapper {
    padding: 0;
    background-color: transparent;
    box-shadow: none;

    &.is-focus,
    &:hover {
      box-shadow: none !important;
    }

    input:-webkit-autofill {
      transition: background-color 1000s ease-in-out 0s;
    }
  }
}

html.dark {
  .login {
    background: url("@/assets/images/login-bg-dark.jpg") no-repeat center right;

    .login-content {
      background: transparent;
      box-shadow: var(--el-box-shadow);
    }
  }
}
</style>
